<template>
  <div class="imgCompress">
    <input id="fileInput" type="file" /> <img id="img" src="" alt="" />
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      visible: false,
      params: {},
    };
  },
  methods: {
    /**
     * 压缩方法
     * @param {string} file 文件
     * @param {Number} quality  0~1之间
     */
    compressImg(file, quality) {
      if (file[0]) {
        return Promise.all(
          Array.from(file).map((e) => this.compressImg(e, quality))
        ); // 如果是 file 数组返回 Promise 数组
      } else {
        return new Promise((resolve) => {
          const reader = new FileReader(); // 创建 FileReader
          reader.onload = ({ target: { result: src } }) => {
            const image = new Image(); // 创建 img 元素
            image.onload = async () => {
              const canvas = document.createElement("canvas"); // 创建 canvas 元素
              canvas.width = image.width;
              canvas.height = image.height;
              canvas
                .getContext("2d")
                .drawImage(image, 0, 0, image.width, image.height); // 绘制 canvas
              const canvasURL = canvas.toDataURL("image/jpeg", quality);
              const buffer = atob(canvasURL.split(",")[1]);
              let length = buffer.length;
              const bufferArray = new Uint8Array(new ArrayBuffer(length));
              while (length--) {
                bufferArray[length] = buffer.charCodeAt(length);
              }
              const miniFile = new File([bufferArray], file.name, {
                type: "image/jpeg",
              });
              resolve({
                file: miniFile,
                origin: file,
                beforeSrc: src,
                afterSrc: canvasURL,
                beforeKB: Number((file.size / 1024).toFixed(2)),
                afterKB: Number((miniFile.size / 1024).toFixed(2)),
              });
            };
            image.src = src;
          };
          reader.readAsDataURL(file);
        });
      }
    },
  },
  mounted() {
    let fileId = document.getElementById("fileInput");
    let img = document.getElementById("img");
    fileId.onchange = (e) => {
      let file = e.target.files[0];
      this.compressImg(file, 0.92).then((res) => {
        //compressImg方法见附录
        console.log(res);
        img.src = window.URL.createObjectURL(res.file);
      });
    };
  },
};
</script>

<style lang="less" scoped>
.imgCompress {
  font-size: 16px;
}
</style>
